* {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        /* background-color: var(--clr-background); */
        background: linear-gradient(135deg, #3c3c3c, #6a11cb, #1ca78b);
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        transition: 0.3s linear;
        display: inline-block;
        align-items: center;
        justify-content: center;
    }

    :root{
        --clr-text: #1ca78b;
        --clr-textitems: #3c3d3c;
        --clr-navbar: #1ca78b;
        --clr-background: #e8e8e8; 
        --clr-items: #c0c7cc;
        --clr-textgrey: #3c3d3c;
    }

    .dark-mode{
        --clr-text: #1ca78b;
        --clr-background: #5c5e5c; 
        --clr-items: #3c3d3c;
        --clr-textgrey: #3c3d3c;
        --clr-textitems: #1ca78b;
    }

    #container-new{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        padding-bottom: 5vh;
        width: 50%;
        margin: auto;
        text-align: center !important;
    }

    h2, h3, p{
        /* color: black;
        text-decoration: underline #1ca78b; */
        color: #e8e8e8;
    }

    .bold{
        color: #1ca78b;
    }


    .input-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hide{
        display: none;
    }

    .header{
        align-items: center;
        justify-content: center;
        transition: 0s linear;
    }



































    /*nav bar stuff */


    .header-si{
        display: flex;
        justify-content: left;
        margin-right: 75%;
    }


    .header-bg{
        position: relative;
        margin: 0;
        padding: 0;
        height: 5em;
        background-color: #3c3d3c;
        text-decoration: none;
    }


    .logo{
        display: flex;
        justify-content: left;
        margin-right: 75%;
        margin-top: -4%;
        top: 0;
        left: 0;
    }

    #nav-a{
        padding: 0;
        color: #1ca78b;
        text-decoration: none;
    }

    .right-cont{
        justify-content: right;
    }

    .icon-container-nav{
        display: flex;
        flex-direction: row;
        margin-left: -15em;
        margin-top: 1.5em;
        padding: 1%;
    }



    .notify-bell{
        color: #1ca78b;
    }

    .notis{
        padding-left: 1.5em;
    }



    .account-icon-phone{
        display: none !important;
    }











    ul{
        list-style:none;
        text-align: right;
    }

    li{
        margin-bottom: 2%;
    }

    li a{
        color: #1ca78b !important;  
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    
    li a:hover{
        color: #1ca78b;  
        text-decoration: underline 1px #1ca78b !important;
        }
    
    .dropdown-1{
        position: absolute;
        padding: 1%;
        max-width: 12em;
        min-width: 10em;
        background-color: #3c3d3c;
        color: #1ca78b !important;
        list-style: none;
        text-decoration: none;
        opacity: 100;
        right: 4%;
        top: 5em;
    }




    .search-container{
        z-index: 0;
        text-align: center;
        margin: 0 auto  ;
        margin-top: 1.5em;
        margin-left: 10%;
    }

    p.dismiss{
        text-decoration: underline;
        color: blue;
        cursor: grabbing;
    }

    button.search{
        min-width: 5em;
        max-width: 5em;
        min-height: 2em;
        max-height: 2em;
        background-color: #1ca78b;
        border: none;
        border-radius: 27px 0px 0px 27px;
    }

    .search-container{
        min-height: 5vh;
        max-height: 5vh;
    }

    button.search:hover{
        transform: none;
        background-color: #1ca78b;
    }

    input.search-bar{
        width: 5em;
        border-radius: 0px 27px 27px 0px !important;
    }


    .search-form{
        text-align: center;
        display: flex;
        flex-direction: row;
        width: 500px;
    }

    .search-bar{
        height: 2em;
        width: 50px;
        border-radius: 0px 0px 0px 27px;
    }

    div.sign-in a{
        display: flex;
        flex-direction: row;
        color: #1ca78b;
    }

    .sign-in p:hover{
        color: #1ca78b;
        text-decoration: underline 2px #1ca78b;
    }

    .sign-in p{
        color: #1ca78b;
        text-decoration: none;
        padding: 0;
    }


    .sign-in span{
        margin-left: .25em;
    }

    .sign-in span:hover{
        text-decoration: none;
    }



    .notis-num{
        color: #3c3d3c;
        font-weight: 600;
        background-color: #f2182a;
        border-radius: 27px;
        height: 1.5em;
        padding-left: .5rem;
        padding-right: .5rem;
        
    }


    .phone-notis{
        display: none;
    }































    /* cokkie pop up */

    .cookie-pop-up{
        text-align: center;
        margin-left: 34%;
        top: 20px;
        bottom: 1%;
        z-index: 100;
        position: sticky;
        height: fit-content;
        width: fit-content;
        padding: 1%;
        margin-bottom: 1%;
        background-color: #3c3d3c;
        color: #1ca78b;
    }



    .cookie-pop-up p{
        margin-bottom: 0;
    }

    .cookie-pop-up p a{
        margin-bottom: 0;
        color: #1ca78b;
    }

    .cookie-pop-up p a:hover{
        margin-bottom: 0;
        color: #1ca78b;
        text-decoration: underline #1ca78b 2px;
    }


    .cookie-buttons{
        display: flex;
        flex-direction: row;
        text-align: center;
    }

    .cookie-btn{
        text-align: center;
        margin-bottom: 2%;
        border-radius: 27px;
        width: 10vw;
    }

    .reject{
        margin-left: 2vw;
    }

    .accept{
        margin-left: 1vw;
    }












    p.dismiss{
        text-decoration: underline;
        color: blue;
        cursor: grabbing;
    }












    button.buy:hover{
        transform: scale(1.01);
        transition: 0.2s ease-in-out;
        background-color: #f2182a;
        border: solid 2px #3c3d3c;
        color: #3c3d3c;
    }

    .icon{
        position: relative;
        height: 0;
        top: 0.2em;
        left: 0;
        margin-right: 0.5em;
        padding-bottom: 1.5em;
    }

    .acc-icon{
        transform: scale(0.8);
    }



    span.dollar{
        background-color: #1ca78b;
    }



    .content{
        background-color: #e8e8e8;
        border: 3px solid #1ca78b;
    }
















    .container-new{
        display: block;
        text-align: center;
        width: auto;
    }

    .img-cont{
        display: block;
        text-align: center;
        width: 100%;
    }

    .info{
        font-weight: bold;
    }

    .bio-center{
        display: block !important;
        text-align: center;
        align-items: center !important;
    }

    .bio{
        padding-left: 30em;
        padding-right: 30em;
        border: 2px solid #1ca78b;
        margin-top: 5rem;
    }

    .bio-btn-cont{
        justify-content: center;
        align-items: center;
        text-align: center;
    }


    .bio-btn-cont button{
        margin-top: .25rem;
        margin-bottom: .25rem;
        margin-right: .5rem;
    }

    .follow-btn{
        justify-content: center;
        align-items: center;
        text-align: center;
    }




    .col-md-12{
        margin-top: -7vh;
        margin-left: 0.5vw;
    }

    .follow, .unfollow{
        margin-top: 2vh;
        /* margin-left: 41vw; */
    }



    span{
        height: 5vh;
    }

    .delete{
        text-align: center;
    }

    .text-cont{
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .unverified{
        color: #f2182a;
        font-size: 1em;
        font-weight: 400;
        margin-top: 2em;
        margin-bottom: 3em;
        inline-size: 70%;
    }

    select{
        height: 2rem;
    }
    div.artist-options{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    span.analytics{
        font-weight: 800;
        color: #1ca78b;
    }

    .h2.message{
        color: #1ca78b;
    }

    a{
        color: #3c3d3c;
        text-decoration: none;
    }


    button.search{
        min-width: 5em;
        max-width: 5em;
        min-height: 2em;
        max-height: 2em;
        background-color: #1ca78b;
        border: none;
        border-radius: 27px 0px 0px 27px !important;
    }

    .content{
        background-color: #e8e8e8;
        border: 3px solid #1ca78b;
        border-radius: 27px;
        margin-bottom: 1%;
    }




    .info{
        font-weight: bold;
    }






    .rounded{
        background-color: #1ca78b;
        border: #1ca78b 2px;
        border-radius: 27px !important;
    }


    button{
        margin-top: 30%;
        width: 15vw;
        /* background-color: #1ca78b;
        border: solid 3px #1ca78b; */
        /* box-shadow: 2px 3px 3px 1px #3c3d3c; */
    }

    button.buy{
        width: 5em;
        padding: 0.5%;
        background-color: #f2182a;
        border: solid 3px #f2182a;
        border-radius: 27px;
        /* box-shadow: 2px 3px 3px 1px #3c3d3c; */
    }



    button:hover{
        transform: scale(1.1);
        transition: 0.3s ease-in-out;
        background-color: #fff;
        border-width: 1px;
        color: #1ca78b;
    }


    button.search:hover{
        transition: 0.3s ease-in-out;
        background-color: #1ca78b;
        border-width: 1px;
        color: #3c3d3c;
    }

    .post-info-bottom-row{
        display: flex;
        flex-direction: column !important;
    }

    .type{
        margin-left: 1rem;
    }

    button.cookie-btn:hover{
        transform: scale(1.1);
        transition: 0.3s ease-in-out;
        background-color: #1ca78b;
        border-width: 1px;
        color: #3c3d3c;
    }


    button.buy-btn:hover{
        transform: scale(1) !important;
        transition: 0.3s ease-in-out;
        background-color: #f2182a;
        border: solid 2px #3c3d3c;
        color: #3c3d3c;
    }

    .buy-btn{
        background-color: #f2182a;
        border: 2px solid #f2182a;
        width: 10em !important;
        border-radius: 27px !important;
        margin-bottom: 3rem;
    }



    .checkout-btn{
        margin-left: 2rem;
        width: 5em !important;
        transform: scale(0.8);
    }

    span.dollar{
        background-color: #1ca78b;
    }



    .content{
        background-color: #3c3c3c;
        border: 3px solid #1ca78b;
        border-radius: 27px;
        margin-bottom: .75rem;
    }




    .info{
        font-weight: bold;
        color: #e8e8e8 !important;
    }


    .info-row{
        display: flex;
        flex-direction: row !important;
        margin-bottom: 0;
    }


    .artist-logo{
        display: inline-block;
        vertical-align: middle;
        width: 8em;
        height: 8em;
        border: 3px solid #1ca78b;
        border-radius: 27px;
        margin-top: 2em;
        margin-bottom: 1em;
    }


    .blurred-image {
        filter: blur(20px);
        transition: filter 0.5s ease;
    }

    .blurring {
        filter: blur(10px);
        transition: filter 0.5s ease;
    }

























    .buy{
        background-color: #f2182a;
        border: 3px #f2182a;
        border-radius: 27px !important;
    }

    .rounded{
        border: 3px #1ca78b;
        border-radius: 27px !important;
    }


    a{
        color: #1ca78b !important;
        text-decoration: none !important;
    }



    a:hover{
        text-decoration: underline 2px #1ca78b !important;
    }

    footer{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #1ca78b;
        text-decoration: none;
        background-color: #3c3d3c;
        width: 99vw;
        padding: 0;
        margin-top: auto;
    }
































    /* phone */


    @media only screen and (max-width: 600px){


        body{
            max-width: 100vw !important;
        }
        
        .header-si, .header-bg{
            overscroll-behavior-inline: contain;
        }
        
        .logo{
            margin-left: -5rem;
        }
        
        .search-container{
            margin-left: -5rem;
            transform: scale(0.9);
        }
        
        
        .search-container form{
        width: 65vw;
        overscroll-behavior-inline: contain;
        }
        
        button.search-icon-btn{
            min-width: 2.5rem !important;
            max-width: 2.5rem !important;
        }
        
        .search-icon{
            transform: scale(0.8);
        }
        
        input.search-bar{
            max-width: 7.5em;
            border-radius: 0px 23px 23px 0px !important;
        }
        
        
        .right-cont{
            display: none;
        }
        
        .icon-container-nav{
            display: flex;
            flex-direction: row;
            margin-top: 1.5em;
            padding: 1%;
        }
        
        
        div.sign-in-phone{
            visibility: visible;
            display: flex;
            flex-direction: row;
            margin-left: 1.25rem !important;
        }
        
        
        div.sign-in-phone p{
            font-weight: bold;
            margin-top: .25rem;
        }
        
        
        circle{
            transform: scaleX(1.01);
        }
        
        .sign-in-icon-phone{
            transform: scaleY(1.5) !important;
        }
        
        
        .account-icon-phone{
            display: flex !important;
            margin-left: -2.25rem;
            color: #1ca78b;
            transform: scale(1.2);
            margin-top: .25rem;
        }
        
        .dropdown-1{
            margin-right: -1rem;
            justify-content: right;
            min-width: 15em;
        }
        
        .dropdown-1 li{
            margin-right: 10rem;
            margin-left: 0;
            padding: 0;
            white-space: nowrap;
            justify-content: left;
        }
        
        .icons{
            padding-left: .25rem;
            transform: scale(0.7);
            transform: translateY(5px);
        }
        
        
        
        .phone-notis{
            display: flex;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
            margin-top: .5rem;
            height: 1.5rem;
        }
        
        .notis-num-phone{
            color: #3c3d3c;
            font-weight: 300;
            font-size: smaller;
            background-color: #f2182a;
            border-radius: 27px;
            height: fit-content;
            padding-left: 0.75%;
            padding-right: 0.75%;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
        
        
        
        div.options{
            display: grid !important;
            grid-auto-flow: column;
            grid-auto-columns: auto;
            gap: 1rem;
            overflow-x: auto;
            overscroll-behavior-inline: contain;
            margin-left: 1rem;
            padding-bottom: 1rem;
            padding-right: 1rem;
            text-align: left !important;
        }
        
        .options-genre{
            visibility: visible;
            display: grid;
        }
        
        button.option{
        min-width: fit-content;
        font-size: small; 
        padding: .25rem;
        }
        
        button.unfollow{
            background-color: #5c5e5c;
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* posts styling */
        
    
        
        }








    @media screen and (min-device-width: 768px)
    and (max-device-width: 1024px) {
        .header{
            margin-left: 37%;
        }   
        input.price{
            max-width: 85%;
        }
        div.form-check{
            text-align: center;
            margin-left: 0%;
        }
        div.checkbox-container{
            text-align: center;
        }
        .thumb{
            max-width: 70%;
            max-height: 100%;
            min-width: 50%;
            min-height: 100%;
        }

        button.rounded{
            width: 50%;
        }
        .logo{
            margin-top: 2em;
            transform: scale(1.2);
        }
        .col-md-12{
            margin-top: 1em;
        }
        .cont{
            text-align: center;
        }
        button.del{
            width: 30%;
            margin-left: 1.3em;
        }
    }


    @media screen and (min-device-width: 810px)
    and (max-device-width: 1080px) {
        .header{
            margin-left: 43%;
        }   
        div.form-check{
            text-align: center;
            margin-left: 0%;
        }
        div.checkbox-container{
            text-align: center;
        }
        .thumb{
            max-width: 50%;
            max-height: 100%;
            min-width: 50%;
            min-height: 100%;
        }
        button.rounded{
            width: 50%;
        }
        .logo{
            margin-top: 2em;
            transform: scale(1.2);
        }
        .col-md-12{
            margin-top: 1em;
        }
        .cont{
            text-align: center;
        }
        button.del{
            width: 30%;
            margin-left: 1.5em;
        }
    }






























    @media only screen   
    and (min-device-width : 768px){
        .header{
            align-items: center;
            justify-content: center;
            transition: 0.3s linear;
        }


        .delete{
            display: block;
        }
    }